<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }


    .button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }
  </style>
</head>

<body>

  <input hidden type="file" id="file" multiple></input>
  <button class="button" id="uploadBtn">uploads</button>



  <script>
    const imageTypes = ['jpeg', 'png', 'jpg'];
    const accept = [...imageTypes, 'pdf', 'docx', 'doc', 'xlsx']
    const fileInput = document.getElementById('file');
    fileInput.accept = accept.map(v => '.' + v).join(',');
    const uploadBtn = document.getElementById('uploadBtn');

    // 获取文件扩展名
    function getFileExtension(filename) {
      const parts = filename.split('.');
      return parts[parts.length - 1] ?? '';
    }


    // 校验文件函数
    function validateFiles(files) {
      if (!files.length) return false;

      // 获取第一个文件的类型
      const firstFile = files[0];
      const firstFileType = getFileExtension(firstFile.name).toLowerCase();

      // 检查第一个文件类型是否被接受
      if (!accept.includes(firstFileType)) {
        alert(`文件 ${firstFile.name} 类型不正确，请上传正确的文件类型`);
        return false;
      }

      // 判断第一个文件是否为图片类型
      const isFirstFileImage = imageTypes.includes(firstFileType);

      // 检查所有文件(除开第一个)
      for (let i = 1; i < files.length; i++) {
        const file = files[i];
        const fileType = getFileExtension(file.name).toLowerCase();

        // 检查文件类型是否被接受
        if (!accept.includes(fileType)) {
          alert(`文件 ${file.name} 类型不正确，请上传正确的文件类型`);
          return false;
        }

        // 检查文件类型一致性（图片类型只能与图片类型一起上传）
        const isCurrentFileImage = imageTypes.includes(fileType);

        if (isFirstFileImage !== isCurrentFileImage) {
          alert(`文件 ${file.name} 类型不一致，请保持文件类型统一（全部为图片或全部为文档）`);
          return false;
        }
      }

      return true;
    }
















    uploadBtn.addEventListener('click', function () {
      fileInput.click();
    });

    // 文件选择完成后处理
    fileInput.addEventListener('change', function (event) {

      const files = [...event.target.files];

      // 校验所有文件
      if (!validateFiles(files)) return;


      // 文件校验通过，可以继续处理
      console.log('文件校验通过，可以上传');
      // 这里可以添加上传逻辑















    });

  </script>
</body>

</html>